<template>
<div class="main-layout-wra" style="height: 100%">
  <xdh-layout class="main-layout" :fixed="true" :north="{'height': 'auto'}">
    <slot name="header" slot="north" >
      <xdh-header 
        title="株洲系统" 
        :tools="headTools"
        user-icon="iconfont icon-user"
        user-text="超级管理者"
        layout="logo, title, -> ,user, tool"
      >
        <img slot="logo" src="" alt="" />
      </xdh-header>
    </slot>

    <div ref="main" class="layout-main" style="height: 100%">
      <el-carousel style="height: 100%" height="100%" :autoplay="false" :initial-index="1" indicator-position="none">
        <el-carousel-item  >
          <intel-analysis></intel-analysis>
        </el-carousel-item>

        <el-carousel-item > <!--个人平台-->
          <xdh-layout class="platform-layout" :fixed="true" :south="platformLayout.south" :north="platformLayout.north">
            <div class="bread-crumb" slot="north">
              <xdh-breadcrumb  v-show="$route.path !== '/'" :data="breadData">
                 <i slot="tool" class="back-home iconfont icon-home" title="返回主页" @click="backHome"></i> 
              </xdh-breadcrumb>
            </div>
            <div style="height: 100%">
              <router-view></router-view>
            </div>
            <slot name="footer" slot="south">
              <div class="platform-layout-footer">
                <div class="home" @click="closeAllApps">
                  <em class="iconfont icon-home"></em> 首页
                </div>
                <div class="apps">
                  <apps-nav v-show="appsArray.length" ></apps-nav>
                </div>
              </div>
            </slot>
          </xdh-layout>
        </el-carousel-item>

        <el-carousel-item >
          <control-panel></control-panel>
        </el-carousel-item>
      </el-carousel>
    </div>
  </xdh-layout> 
  <app-window v-for="(item, index) in appsArray"
    :key="index" :title="item.label" 
    v-show="!item.closed" :app="item"  
  ></app-window>
</div>
</template>

<style lang="scss" scoped>
@import "../style/_vars.scss";
.bread-crumb{
  .back-home{
    font-size: 18px;
  }
}
.platform-layout-footer{
  display: flex;
  width: 100%;
  height: 32px;
  background: black;
  flex-flow: row nowrap;
  align-items: center;
  .home{
    flex: 0 0 80px;
    display:flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    background:$--color-primary;
    color:white;
    text-align:center;
  }
  .apps{
    // display: block;
    flex: 1;
  }
  
}

 
</style>

<script>
import {mapState} from 'vuex'
import XdhLayout from '@/widgets/xdh-layout'
import XdhHeader from '@/widgets/xdh-header'
import XdhBreadcrumb from '@/widgets/xdh-breadcrumb'
import IntelAnalysis from './intel-analysis'
import ControlPanel from './control-panel'
import AppsNav from '../components/apps-nav'
import AppWindow from '../components/app-window'
export default {
  name: 'index',
  components: {
    XdhLayout,
    XdhHeader,
    IntelAnalysis,
    ControlPanel,
    AppsNav,
    AppWindow,
    XdhBreadcrumb
  },
  props: {},
  data() {
    return {
      platformLayout: {
        south: {height: 'auto'},
        north: {height: 'auto'}
      },
      headTools: [
        {
          id: 'logout',
          icon: 'iconfont icon-exit',
          text: '登出'
        }
      ]
    }
  },
  computed: {
    breadData() {
      
      return [{text: '主页', to: '/'}, {text: this.$route.name}]
    },
    ...mapState('apps', {
      'appsArray': 'appsArray'
    })
  },
  methods: {
    backHome() {
      this.$router.push({'path': '/'})
    },
    closeAllApps() {
      this.$store.commit('apps/closeAllApps')
    },
    openApp(app) { 
      let openApp = {
        ...app,
        closable: true,
        closed: true
      }
      if (!this.appsArray.length) {
        openApp.closed = false
      } 
      this.$store.commit('apps/addAppsArray', openApp)
    } 
  },
  mounted() {
    window.openApp = this.openApp
    window.closeAllApps = this.closeAllApps
    
    window.addEventListener('message', (event) => {
      if (event.data && event.data.fromPlatformApp) {
        this.closeAllApps()
        this.openApp(event.data.app)
      }
    })
  }
}
</script>

